<!--3d视图组件-->
<template>
  <div style="border-style: none">
    <!--导航菜单-->
    <bg></bg>
    <navmenu></navmenu>
    <div id="view-3d">
      <!--包装page,方便坐标转换-->
      <div id="wrapper" :style="{transform:getTransform}">
        <page>
          <titlecom>关于我</titlecom>
          <perinfo></perinfo>

          <div style="float:left">
            <h1>刘志国</h1>
            <h2>Web前端开发者</h2>
            <p style="max-width: 320px">
              &nbsp;我叫刘志国，一个半路出家的Web开发者,很高兴您能阅读我的简历，没有光鲜的学历、丰厚的履历，有的只是不断的学习、日积月累的知识和对个人追求的执着，想了解我能力可以关注我的码云代码托管平台，如果对我感兴趣，欢迎您联系我。
            </p>
          </div>
          <perinfor>
            <infoitem>
              <span slot="item">姓名</span>
              <span slot="info">刘志国</span>
            </infoitem>
            <infoitem>
              <span slot="item">生日</span>
              <span slot="info">1990年2月21日</span>
            </infoitem>
            <infoitem>
              <span slot="item">籍贯</span>
              <span slot="info">辽宁朝阳</span>
            </infoitem>
            <infoitem>
              <span slot="item">现居</span>
              <span slot="info">浙江杭州</span>
            </infoitem>
            <infoitem>
              <span slot="item">电话</span>
              <span slot="info">18806501093</span>
            </infoitem>
            <infoitem>
              <span slot="item">邮箱</span>
              <span slot="info">lzg46153@126.com</span>
            </infoitem>

            <infoitem>
              <span slot="item">毕业院校</span>
              <span slot="info">辽宁科技大学(本科)</span>
            </infoitem>

            <infoitem>
              <span slot="item">代码托管</span>
              <span slot="info">
                <a href="https://git.oschina.net/liu11" style="color: #757070">git.oschina.net/liu11</a>
              </span>
            </infoitem>
          </perinfor>
          <figure style="position: absolute;top: 430px;left: 0;">
            <div style="position: relative;">
              <img src="/static/img/logo.png" alt="" style="width: 50px;height: 50px;" class="fl">
              <p class="fl" style="margin-left: 10px">本简历使用Vue.js框架，vue-cli构建。<a
                href="https://git.oschina.net/liu11/MyResume" style="color: #757070">项目地址</a></p>
            </div>

          </figure>
        </page>
        <page :px="1000" :py="-500" :pz="-1500" :rz="10">
          <titlecom>个人简历</titlecom>
          <section class="skill fl">
            <h2>专业技能</h2>
            <skiitem>
              <span slot="skititle">HTML/CSS/JavaScript基础</span>
              <p slot="skiinfo">熟悉w3c标准，熟练掌握html/css/js,熟练运用div+css布局，js操作dom,js设计模式及js实现相关网页效果。</p>
            </skiitem>
            <skiitem>
              <span slot="skititle">HTML5/CSS3/ES6/jQuery/bootstrap</span>
              <p slot="skiinfo">深刻理解Web语义化，熟练运用CSS3实现相关网页效果，熟悉CSS-3D,了解ES6及Babel编译器配置，熟练使用jQuery/bootstrap框架</p>
            </skiitem>
            <skiitem>
              <span slot="skititle">OOP/MVC/MVVM/Vue.js</span>
              <p
                slot="skiinfo">深刻理解面向对象编程思想、MVC框架、双向数据绑定，能够手动实习双向绑定，熟悉Vue.js,了解React.js/Angularjs,熟悉JS/SASS面向对象编程。</p>
            </skiitem>
            <skiitem>
              <span slot="skititle">PHP/Nodejs/Mysql/Ajax</span>
              <p slot="skiinfo">了解PHP/Nodejs服务器语言和Mysql数据库，熟悉thinkphp/express框架，熟悉Ajax前后端交互，了解WEB安全相关知识。</p>
            </skiitem>
            <skiitem>
              <span slot="skititle">Git/Webpack/H5/C++</span>
              <p
                slot="skiinfo">开发工具：WebStorm/Sublime/PS、构建工具:gulp/webpack、Git版本控制工具、CocosCreator开发游戏、C++/Lua基础。</p>
            </skiitem>
          </section>
          <section class="eduexp fl">
            <h2>教育经历</h2>
            <div>
              <table>
                <tr>
                  <td>
                    <div class="square fl"></div>
                  </td>
                  <td>
                    <h3 style="line-height: 20px;padding: 0">毕业院校：</h3>
                  </td>
                  <td><h3 style="line-height: 20px;padding: 0;text-align: center">辽宁科技大学</h3></td>
                  <td><h3 style="line-height: 20px;padding: 0;text-align: center">材料(本科)</h3></td>
                </tr>
                <tr>
                  <td>
                    <div class="square fl"></div>
                  </td>
                  <td>
                    <h3 style="line-height: 20px;padding: 0">培训经历：</h3>
                  </td>
                  <td><h3 style="line-height: 20px;padding: 0;text-align: center">极客学院</h3></td>
                  <td><h3 style="line-height: 20px;padding: 0 5px;text-align: center">web前端</h3></td>
                </tr>
              </table>
            </div>
            <h2>工作经历</h2>
            <div>
              <table>
                <tr>
                  <td>
                    <div class="square fl"></div>
                  </td>
                  <td>
                    <h3 style="line-height: 20px;padding: 0">######</h3>
                  </td>
                  <td><h3 style="line-height: 20px;padding: 0;text-align: center">#######</h3></td>
                  <td><h3 style="line-height: 20px;padding: 0 5px;text-align: center">#######</h3></td>
                </tr>
              </table>
            </div>
          </section>
        </page>
        <page :px="-300" :py="-1200" :pz="-3000">
          <titlecom>作品展示</titlecom>
          <ul class="works">
            <li><img src="/static/img/pro/thu/1.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>电商页面</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/2.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>计算器</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/3.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>Creator贪吃蛇</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/4.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>地图编辑</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/5.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>移动页面</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/6.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>课程网站</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/7.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>数据CURD</h2>
              </figure>
            </li>
            <li><img src="/static/img/pro/thu/8.jpg" alt="">
              <figure style="position: absolute; top:10px; text-align: center;color: #222">
                <h2>瀑布流</h2>
              </figure>
            </li>
          </ul>
        </page>
        <page :px="-300" :py="-1200" :pz="-3200" :ry="180">
          <titlecom>联系方式</titlecom>
          <contract></contract>
        </page>
        <page :px="-1600" :py="-600" :pz="-4700" :rz="10">
          <titlecom>其他</titlecom>
          <section class="selfapp fl">
            <h2>自我评价</h2>
            <infoitem2>&nbsp;个性稳重、为人诚实、乐于助人、具有高度责任感。</infoitem2>
            <infoitem2>&nbsp;学习能力强，有良好的思维能力，能够找到关键点。</infoitem2>
            <infoitem2>&nbsp;代码强迫症，要求最佳解决方案。</infoitem2>
            <infoitem2>&nbsp;积极进取，适应力强，脚踏实地，知识储备丰富。</infoitem2>
          </section>
          <section class="selfapp fr">
            <h2>阅读书籍</h2>
            <infoitem2>&nbsp;《HeadFirst系列》</infoitem2>
            <infoitem2>&nbsp;《JavaScript高级程序设计(第三版)》</infoitem2>
            <infoitem2>&nbsp;《锋利的jQuery》</infoitem2>
            <infoitem2>&nbsp;《七周七Web开发框架》等</infoitem2>
          </section>
          <section class="selfapp about fl">
            <infoitem2>&nbsp;本简历还在不断完善，作品相关请看我的码云代码托管</infoitem2>
          </section>

        </page>
        <!--<page :px="-1600" :py="-600" :pz="-4500" :rz="-10"></page>-->
      </div>
    </div>
  </div>
</template>

<script>
  import eventHub from '../assets/eventHub';
  import page from './Page.vue'
  import navmenu from './NavMenu.vue'
  import titlecom from './TitleCom.vue'
  import perinfo from './PerInfo.vue'
  import infoitem from './InfoItem.vue'
  import perinfor from './PerInfoR.vue'
  import skiitem from './SkiItem.vue'
  import contract from './Contract.vue'
  import bg from './Background.vue'
  import infoitem2 from './InfoItem2.vue'
  var wrapTransform = [
    {px: 0, py: 0, pz: 0, rx: 0, ry: 0, rz: 0},
    {px: -1000, py: 500, pz: 1500, rx: 0, ry: 0, rz: -10},
    {px: 300, py: 1200, pz: 3000, rx: 0, ry: 0, rz: 0},
    {px: 300, py: 1200, pz: 3200, rx: 0, ry: -180, rz: 0},
    {px: 1600, py: 600, pz: 4700, rx: 0, ry: 0, rz: -10},
    {px: 1600, py: 600, pz: 4500, rx: 0, ry: 0, rz: 10},
  ]
  export default{
    name: 'view3d',
    components: {
      page,
      navmenu,
      titlecom,
      perinfo,
      infoitem,
      perinfor,
      skiitem,
      contract,
      bg,
      infoitem2
    },
    data: function () {
      return {
        pageIdx: 0
      }
    },
    computed: {
      //计算属性：获得transform
      getTransform: function () {
        var temp = wrapTransform[this.pageIdx]
        return 'rotateX(' + temp.rx + 'deg) rotateY(' + temp.ry + 'deg) rotateZ(' + temp.rz +
          'deg) translate3D(' + temp.px + 'px, ' + temp.py + 'px, ' + temp.pz + 'px)'
      }
    },
    mounted(){
      var me = this;
      eventHub.$on('viewchange', function (i) {
        me.pageIdx = i;
      })
    }
  }

</script>

<style>
  #view-3d {
    position: fixed;
    transform-origin: left top 0px;
    transition: all .5s ease-in-out .25s;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    transform: perspective(1000px);
    background-color: rgba(0, 0, 0, 0);
  }

  #wrapper {
    position: absolute;
    transform-origin: left top 0px;
    transition: all .7s ease-in-out 0s;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3D(0px, 0px, 0px);
    margin: 0;
  }

  .skill {
    min-height: 500px;
    width: 440px;
    margin-left: 20px;
  }

  .eduexp {
    min-height: 300px;
    width: 450px;
    margin-left: 20px;
  }

  .selfapp {
    min-height: 100px;
    width: 440px;
    margin-left: 20px;
  }

  .about {
    margin-top: 40px;
  }

  .works {
    margin: 0;
    padding: 0;
  }

  .works li {
    position: relative;
    list-style: none;
    padding: 10px;
    float: left;
    border: 1px solid #c4c4c4;
  }

  .works img {
    width: 210px;
    height: 140px;
    border: 1px solid #c4c4c4;
    transform: scale(0.9);
  }

  .works img:hover {
    transform: scale(1);
    opacity: 0.8;
  }

</style>
